<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-position="left"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="职位名称" prop="job">
      <el-input v-model="ruleForm.job" type="input" autocomplete="off" />
    </el-form-item>
    <el-form-item label="薪资" prop="salary">
      <el-input v-model="ruleForm.salary" type="input" autocomplete="off" />
    </el-form-item>
    <el-form-item label="学历" prop="education">
      <el-input v-model="ruleForm.education" type="input" autocomplete="off" />
    </el-form-item>
    <el-form-item label="经验" prop="experience">
      <el-input v-model="ruleForm.experience" type="input" autocomplete="off" />
    </el-form-item>
    <el-form-item label="工作地点" prop="address">
      <el-input v-model="ruleForm.address" type="input" autocomplete="off" />
    </el-form-item>
    <el-form-item label="招聘人数" prop="number">
      <el-input v-model.number="ruleForm.number" />
    </el-form-item>
    <el-form-item label="截止时间" prop="valid_time">
      <el-date-picker
            v-model="ruleForm.valid_time"
            type="date"
            label="选择时间"
            placeholder="选择时间"
            style="width: 100%"
          />
    </el-form-item>
    <el-form-item label="职位描述" prop="description">
      <el-input v-model="ruleForm.description" type="textarea" autocomplete="off" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >提交</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref ,onMounted,defineProps ,toRefs} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getUser } from '../../api/otherApi.js'
import { addJob } from '../../api/enterprise.js'

const ruleFormRef = ref<FormInstance>()
const props = defineProps(['userData','formData'])

const {userData,formData} = toRefs(props)
console.log(1,userData?.value)

const ruleForm = reactive({
  address: '',
  avatar: '',//企业logo
  company_profile: '',//公司简介
  description: '精通js，vue...',//职位描述
  education: '本科', //学历
  eid: 0,
  experience: '三年',//经验
  id: 0,
  industry: '互联网',//行业
  job: '前端开发',//职位名称
  name: '',//企业名称
  number: 1,//招聘人数
  releaseTime: '',//发布时间
  salary: '10000',//薪资
  username:'',//企业用户名
  valid: 1, //是否上线
  valid_time: '',  //有效时间
  view:''
})

if(userData){
  ruleForm.eid = userData?.value.id
  ruleForm.name = userData?.value.name
  ruleForm.industry = userData?.value.manage
  ruleForm.username = userData?.value.username
  ruleForm.address = userData?.value.address
  ruleForm.company_profile = userData?.value.intro
}

  

const rules = reactive<FormRules>({
  job: [{ required: true, message: '职位名称不能为空！', trigger: 'blur' }],
  salary: [{ required: true, message: '薪资不能为空！', trigger: 'blur' }],
  education: [{ required: true, message: '学历不能为空！', trigger: 'blur' }],
  experience: [{ required: true, message: '经验不能为空！', trigger: 'blur' }],
  description: [{ required: true, message: '职位描述不能为空！', trigger: 'blur' }],
  address: [{ required: true, message: '工作地点不能为空！', trigger: 'blur' }],
  number: [{ required: true, message: '招聘人数不能为0！', trigger: 'blur' },
  { type: 'number',min: 1, max: 10, message: '招聘人数1~10人', trigger: 'blur' }],
  valid_time: [{ required: true, message: '截止时间不能为空！', trigger: 'blur' }],
})

const emit = defineEmits(['submitForm'])

const resetForm = (formEl: FormInstance | undefined) => {
  console.log(formEl)
  if (!formEl) return
  formEl.resetFields()
}
const submitForm = (formEl: FormInstance | undefined) => {
  let isDialog = true;
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      await addJob(ruleForm).then(res=>{
        if(res.code === 200){
          isDialog = false;
          emit('submitForm',isDialog)
          resetForm(ruleFormRef.value)
        }
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
  
}

</script>
